<div id="product_preview_{{blockId}}">
  <div class="swiper-container" >
    <ul class="swiper-wrapper swiper-wrapper-product" style="width:100%">
      {% for image in previewImage %}
        {% if image.file_type == "video" %}
          <li class="swiper-slide">
            <div class="product_preview-video-container swiper-slide-video product_preview-video">
              <div style='position: absolute;top:0;left:0;width:100%;height:100%;z-index: 10;' class="video-product_preview-box">
                <img style="width: 100%;height:100%;object-fit: cover;" class="video-product_preview-img" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image.alt | default : product.title }}"/>
                {%- include 'default_icon', icon:"video", height:"48", width:"48" -%}
              </div>
              <video src="{{image.params.url}}" controls="controls"></video>
            </div>
          </li>
        {% elsif image.file_type == "youtube" %}
          <li class="swiper-slide">
            <div class="product_preview-youtube-container">
              <iframe type="text/html" src="{{image.params.url}}?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
            </div>
          </li>
        {% else %}
          <li class="swiper-slide control-product_detail-picture_item">
            <a href="{{ productHref | default:'javascript:;'}}">
              {% if image.src != "" %}
                <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image.alt | default : product.title }}"/>
              {% else %}
                <img style="width: 100%"  src="{{ 'empty.png' | public_asset_abs_url }}" />
              {% endif %}
            </a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
  {% if previewImage.size > 1 %}
    
    <div class='flex md:justify-center justify-between md:block product-preview-small p-5' {% unless showSmall %}style='display:none'{% endunless %}>
      <div class='flex items-center gap-1 md:hidden'>
        <span class='small-number'>1</span>
        <span>/</span>
        <span>{{previewImage.size}}</span>
      </div>
      <div class="product-swiper-small justify-center gap-3" style="padding:0 !important;">
        <div class="navigation" data-type="prev">
          <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.8002 2.99961L3.8002 8.99961L9.8002 14.9996L8.6002 17.3996L0.200195 8.99961L8.6002 0.599609L9.8002 2.99961Z" fill="currentColor"></path>
          </svg>
        </div>
      
        <div class="hidden md:block swiper-container-small">
          <ul class="swiper-wrapper">
            {% for image in previewImage %}
              {% if image.file_type == "video" or image.file_type ==  "youtube" %}
                <li class="swiper-slide swiper-slide-video swiper-small-item">
                  {%- include 'default_icon', icon:"video", height:"32", width:"32" -%}
                  <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image.alt }}"/>
                </li>
              {% else %}
                <li class="swiper-slide swiper-small-item">
                  <img style="width: 100%" data-src="{{ image.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" alt="{{ image.alt }}"/>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      
        <div class="navigation" data-type="next">
          <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.199804 2.99961L6.1998 8.99961L0.199804 14.9996L1.3998 17.3996L9.7998 8.99961L1.3998 0.599609L0.199804 2.99961Z" fill="currentColor"></path>
          </svg>
        </div>
      </div>
    </div>
  {% endif %}
</div>
<script>
  (function(){
    var blockId = "{{blockId}}";
    var productId = "{{productId}}"
    var previewImage = {{previewImage|json}};
    var showSmall = "{{ showSmall | default:false}}";
    var productPreviewNode = $("#product_preview_" + blockId);
    var video = productPreviewNode.find(".product_preview-video"); // $(".product_preview-video" + blockId);
    video.click(function() {
      var video = $(this).find("video");
      var videoIcon = $(this).find(".video-icon");
      if ($(this).find(".video-product_preview-img")) {
        $(this).find(".video-product_preview-img").remove();
      }
      video.css({'z-index': '20', "position": "relative"})
      videoIcon.hide()
      video[0].play()
    })
    video.find("video").each(function(key, item) {
      var videoIcon = $(this).siblings(".video-product_preview-box").find(".video-icon");
      item.addEventListener("play", function() {
        $(this).css({'z-index': '20', "position": "relative"})
        videoIcon.hide()
      })
      item.addEventListener("pause", function() {
        $(this).css({'z-index': '1', "position": "relative"})
        videoIcon.show()
      })
    });
    function pauseVideo() {
      var video = productPreviewNode.find(".swiper-slide-video").find("video");
      for (var i = 0; i < video.length; i++) {
        var element = video[i];
        element.pause()
      }
      var youtube = productPreviewNode.find("iframe");
      for (var i = 0; i < youtube.length; i++) {
        var element = youtube[i];
        var func = 'pauseVideo';
        element.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
      }
    }
    var smallIndex = 0;
    function setSmallClass(index) {
      if (previewImage.length && showSmall) {
        productPreviewNode.find(".swiper-small-item").eq(index).addClass("active").siblings().removeClass("active");
        productPreviewNode.find(".small-number").html(index + 1)
      }
    }
    var mySwiperSmall = new Swiper(productPreviewNode.find(".swiper-container-small"), {
      spaceBetween: 10,
      slidesPerView: 'auto',
      slideToClickedSlide: true,
      normalizeSlideIndex: false,
      centerInsufficientSlides: true,
      on: {
        tap: function(swiper, event) {
          mySwiper.slideTo(mySwiperSmall.clickedIndex)
          setSmallClass(mySwiperSmall.clickedIndex)
          pauseVideo();
        }
      }
    })

    {% if source == "product_detail" %}
      var swiperImg = productPreviewNode.find(".swiper-slide img");
      swiperImg.click(function () {
        const JqThis = productPreviewNode;
        const parentIndex = swiperImg.index($(this));
        moi.pictureImages( previewImage.filter(item=>item.file_type === "image").map(el=>el.src) , parentIndex, JqThis)
      })
    {% endif %}
    var mySwiper = new Swiper(productPreviewNode.find(".swiper-container"), {
      autoHeight: true,
      updateOnImagesReady: true,
      allowTouchMove: true,
      zoom: true,
      on: {
        init() {
          setSmallClass(0)
        },
        slideChangeTransitionStart() {
          if (previewImage.length && showSmall) {
            smallIndex = this.activeIndex;
            setSmallClass(this.activeIndex);
            mySwiperSmall.slideTo(this.activeIndex);
          }
          pauseVideo();
        }
      }
    })

    moi.addEvent('lazyImg', function(event) {
      if (event.params && previewImage.findIndex(item => item.src == event.params) > -1 && mySwiper) {
        mySwiper.updateAutoHeight()
      }
    })
    productPreviewNode.find(".navigation").click(function(event) {
      event.stopPropagation()
      const type = $(this).data("type");
      if (type === "next" && smallIndex < previewImage.length - 1) {
        smallIndex++;
         if(smallIndex === previewImage.length - 1) {
          $(this).addClass('unselectable')
        }
        productPreviewNode.find('.navigation[data-type="prev"]').removeClass('unselectable')

      }
      if (type === "prev" && smallIndex) {
        smallIndex--;
        if(smallIndex === 0) {
          $(this).addClass('unselectable')
        }
        productPreviewNode.find('.navigation[data-type="next"]').removeClass('unselectable')
      } 
      mySwiper.slideTo(smallIndex)
      setSmallClass(smallIndex)
    }) 
    var isDetail = false;
    {% if isDetail %}
      isDetail =true
    {% endif %}
    moi.addEvent('productOptionChange', function(event) {
      var params = event.params;
      if ((params.block_id == blockId && params.image && params.image.src && !isDetail) || (params.block_id == productId && params.image && params.image.src && !isDetail)) {
        var index = previewImage.findIndex(el => el.src === params.image.src);
        setSmallClass(index)
        mySwiper && mySwiper.slideTo(index)
        pauseVideo();
      }
    })

    {% unless showSmall %}
      function isShowNavigation(argument) {
        if ($(window).width() > 767) {
          productPreviewNode.find(".product-preview-small").hide();
          mySwiper.allowTouchMove= false;
          productPreviewNode.find(".swiper-wrapper-product").addClass("product-preview-big-small");
          
        } else {
          productPreviewNode.find(".product-preview-small").show()
          mySwiper.allowTouchMove= true;
          productPreviewNode.find(".swiper-wrapper-product").removeClass("product-preview-big-small");

        }
      }
      $(window).resize(function() {
        isShowNavigation()
      })
      isShowNavigation(); 
    {% endunless %}

  })()
</script>
